<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D立方体</title>
    <style>
        .box {
	        perspective: 1000px;
        }
        #wrapper{
            color: #000;
            line-height: 300px;
            text-align: center;
            font-size: 100px;
            font-weight: bold;
            width: 300px;
            height:300px;
            border: 1px solid #000;
            margin: 150px auto;
            transform-style: preserve-3d;     
            animation: a 10s ease-in-out infinite;
        }
        #wrapper div{
            border-radius: 50%;
        }
        #wrapper div:nth-of-type(1){
            position: absolute;
            width: 300px;
            height: 300px;
            background: #f00;
            opacity: 1;
            transform: translateZ(-150px);
            background: url(img/pic1.jpg);
        }
        #wrapper div:nth-of-type(2){
            position: absolute;
            width: 300px;
            height: 300px;
            background: #f0f;
            opacity: 1;
            transform: rotateY(90deg) translateZ(150px) ;
            background: url(img/pic2.jpg);
        }
        #wrapper div:nth-of-type(3){
            position: absolute;
            width: 300px;
            height: 300px;
            background: #ff0;
            opacity: 1;
            transform: rotateZ(180deg) translateZ(150px) ;
            background: url(img/pic3.jpg);
        }
        #wrapper div:nth-of-type(4){
            position: absolute;
            width: 300px;
            height: 300px;
            background: #0ff;
            opacity: 1;
            transform: rotateY(90deg) translateZ(-150px) ;
            background: url(img/pic4.jpg);
        }
        #wrapper div:nth-of-type(5){
            position: absolute;
            width: 300px;
            height: 300px;
            background: #0f0;
            opacity: 1;
            transform: rotateX(90deg) translateZ(-150px) ;
            background: url(img/pic5.jpg);
        }
         #wrapper div:nth-of-type(6){
            position: absolute;
            width: 300px;
            height: 300px;
            background: blue;
            opacity: 1;
            transform: rotateX(90deg) translateZ(150px) ;
             background: url(img/pic6.jpg);
        }
        @keyframes a{
            100%{
                transform: rotateX(360deg) rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
   <div class="box">
       <div id='wrapper'>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
   </div>
    
</body>
</html>